<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Figuras con Raphaël</title>
<script src="http://lineadecodigo.com/js/raphael/raphael-min.js"></script>
<script src="http://lineadecodigo.com/js/jquery/jquery.js"></script>
</head>
<body>
<h1>Figuras con Raphaël</h1>

 <script>

		$(
		// ejecucion de codigo ...
		function() {
			//crear area de dibujo ...
			var paper = Raphael(10, 50, 700, 700);

			//crear un circulo 
			var circle = paper.circle(200, 200, 100);
			//dibujar un cuadrado 
			var square = paper.rect(200, 200, 100, 100);
			//crear un cuadrado
			var squaretwo = paper.rect(100, 100, 100, 100);
			//poner un texto de hola mundo
			var t = paper.text(150, 150, "Hola Mundo con Raphaël...");

			// poner un atributo de llenado de color del circulo
			circle.attr("fill", "#f00");
			// poner un atributo de linea de color #f77
			circle.attr("stroke", "#f77");
			// poner un atributo de llenado de color del cuadrado
			square.attr("fill", "#ccc");
			// poner un atributo de linea de color #f77
			square.attr("stroke", "#f77");
			// poner un atributo de llenado de color del cuadrado
			squaretwo.attr("fill", "#ccc");

		});
	</script>


<br><br>
<hr>
Art&iacute;culo disponible en: <a href="http://lineadecodigo.com/javascript/usando-raphael-para-dibujar-algunas-formas-en-multiples-navegadores/">http://lineadecodigo.com/javascript/usando-raphael-para-dibujar-algunas-formas-en-multiples-navegadores/</a><br/>
<a href="http://lineadecodigo.com" title="Linea de Codigo">lineadecodigo.com</a>

</body>
</html>